<template>
    <div class="body">
      <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;"  border>
        <el-table-column prop="account" label="姓名">
            <template slot-scope="scope">
              <span>{{scope.row.user.username}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="created_at" label="时间">
        </el-table-column>
        <el-table-column prop="ip" label="IP">
        </el-table-column>
        <el-table-column prop="run_time" label="运行时间">
        </el-table-column>
        <el-table-column label="提交参数">
          <template slot-scope="scope">
            <p>{{scope.row.route_name}}</p>
            <el-button type="text"  @click="getMore(scope.row.input)">查看详情</el-button>
          </template>
        </el-table-column>
       <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="set_admin(scope.row)" type="text" icon="el-icon-edit">修改</el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background @prev-click='prev'
          @next-click='next' :current-page.sync="page" :page-size="per_page" layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>


      <el-dialog
        title="操作详情"
        :visible.sync="moreis"
        width="30%">
        <p>{{more_cz}}</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="moreis=false">确定</el-button>
        </span>
      </el-dialog>



    </div>
</template>

<script>
 import { getUserLogList} from "@/api/user";
  export default {
    data() {
      return {
        per_page:10,
        page:1,
        total:0,
        more_cz:{},
        moreis:false,
        tableData:[]
      }
    },
    mounted() {
      this.getlist()
    },
    methods:{
      getlist() {
        let prms = {
          per_page: this.per_page,
          page: this.page
        }
        getUserLogList(prms).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.tableData = res.data.data
            this.total = res.data.total
          }
        });
      },
      handleSizeChange(val) {
        console.log(val)
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val
        this.getlist()
      },
      prev() {
        this.page = this.page - 1
        this.getlist()
      },
      next() {
        console.log('ss')
        this.page = this.page + 1
        this.getlist()
      },
      getMore(row){
          this.more_cz = JSON.parse(row)
          this.moreis=true
      }
    }
}
</script>

<style scoped>
  .body {
    padding: 20px;
    box-sizing: border-box;
  }

  .pagination {
    text-align: center;
  }
</style>
